<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>播放历史</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="referrer" content="no-referrer"/>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="/frame/js/broadcast.js"></script>
	<script src="/js/Util.js"></script>
</head>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
		text-align: center;
	}
	body{
		margin: 0px auto;
	}
	.header{
		padding: 1vh 0;
		width: 100%;
    	border-bottom: 1px solid gainsboro;
	}
	
	.success td:nth-child(2) {
		color: green;
	}
	.success td:nth-child(2):after {
		content: "成功";
	}
	.not_test td:nth-child(2) {
		color: black;
	}
	.not_test td:nth-child(2):after {
		content: "未测试";
	}
	.error td:nth-child(2){
		color: red;
	}
	.error td:nth-child(2):after {
		content: "失败";
	}
	table{
		width: 100%;
	}
	table tr{
		width: 100%;
	
	}
	table th {
		text-align: center;
		width: 33%;
		display: inline-block;
	}
	table td {
		text-align: center;
		overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
		display: inline-block;
    	width: 33%;
	}

</style>
<body>
	<div class="header" style="position: fixed;background-color: white;">解析器信息</div>
	<div class="header">解析器信息</div>
	<div class="body">
		<table id="table">
			<thead>
				<tr>
					<th>解析器</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="table">

			</tbody>
		</table>
	</div>
	<template id="temp">
		<tr>
			<td></td>
			<td></td>
			<td><button>切换</button></td>
		</tr>
	</template>
</body>
<script type="text/javascript">
	var param = util.getParameter();
	var channelId = param.get("channelId");
	// 创建半双工广播监听 channelId 广播
	var broadcastChannel = new HalfDuplexBroadcast(channelId);
	// 创建处理器 处理 objectProxy组 消息
	var handler = new Handler("objectProxy", broadcastChannel);
	var proxyHandler = new ObjectProxyHandler(handler);
	// 创建远程代理对象，对象id 为 pparser
	var proxy = new ObjectProxy("pparser", proxyHandler);
	// 添加代理方法
	proxy.addProperty("info");
	proxy.addMethod("setParser");

	var listenerHandler = new ObjectProxyListenerHandler(handler);
	// 备份消息
	var _parser_ = null;
	// 绑定pparser对象 供来自player的update变化
	listenerHandler.binding("pparser", new ObjectProxyBinding({
		update: (name, def) => {
			if (_parser_ == null) {
				return;
			}
			// 为空为未指定解析器
			if (!util.isNullString(def)) {
				_parser_.forEach((elem) => {
					if (elem.val == def) {
						elem.checked = util.isNullString(name) ? -1 : 1
					}
				});
			}
			else {
				var flag = false;
				for (var i = 0, l = _parser_.length; i < l; i++) {
					if (name == _parser_[i].val) {
						flag = true;
						_parser_[i].checked = 1;
						continue;
					}
					if (!flag) {
						_parser_[i].checked = -1;
					}
				}
			}

			document.getElementById('table').innerHTML = "";
			_parser_.forEach( (temp) => {
				create(temp.key, temp.val, temp.checked);
			});
		}
	}));

	init();
	async function init() {
		_parser_ = await proxy.info;
		_parser_.forEach( (temp) => {
			create(temp.key, temp.val, temp.checked);
		});
	}

	$("#table").delegate("button", "click", async function (e) {
		var val = $(e.currentTarget).attr("val");
		await proxy.setParser(val);
	})


	function create(name, val, status) {
		var t = document.getElementById('temp');
        var template = document.importNode(t.content, true);
        template.querySelector("td:first-child").innerText = name;
		var tr = template.querySelector("tr");
		var btn = template.querySelector("button");
		btn.setAttribute("val", val);
		if (status === -1) {
			tr.setAttribute("class", "error");
			// th.innerHTML = "不可用";
		}
		else if (status === 1) {
			tr.setAttribute("class", "success");
		}
		else if (status === 0) {
			tr.setAttribute("class", "not_test");
		}
		document.getElementById('table').appendChild(template);
	}
</script>
</html>